<template>
    <div class="folder-layout">
      <div v-if="isSearch" class="search-content">
        <dialog-search-view @callback="onSearch"/>
        <div class="">
          <ul class="project-list">
              <folder-view :data="searchFolderList" @callback="goProjectInfo" :type="1"/>
              <file-view :data="searchFileList" @callback="nextLevelProject" :type="1"/>
          </ul>
        </div>
      </div>
      <!--正文-->
      <div v-else>
        <header-view>
          <img src="../../../assets/image/back.png" alt="" class="icon" @click="goBack">
          <div class="title">{{info && info.name}}</div>
          <!--<img src="../../assets/image/screen.png" alt="" class="icon" @click="isShowProject = !isShowProject">-->
          <img src="../../../assets/image/search.png" alt="" class="icon" @click.stop="isSearch = true">
        </header-view>
        <div class="content">
          <div class="project-list">
              <folder-view :data="projectItem.foldInfos" @callback="goProjectInfo" @showMore="onShowMore"/>
          </div>
        </div>
        <tabbar></tabbar>
      </div>
      <!-- 弹窗-->
      <div class="drop-layout" v-if="isShowMore">
          <dialog-show-more :data="optionForm"/>
      </div>
      <div class="drop-layout" v-if="isShowEdit">
        <dialog-add-view @callback="editFolder" :data="optionForm" :is-edit="true"/>
      </div>
      <div class="drop-layout" v-if="isShowAdd">
        <ul class="drop-dialog">
          <div class="drop-item" @click.stop="">
            <img src="../../../assets/image/no-add-project.png" alt="">
            <span class="font-large" style="opacity: 0.7">新建项目</span>
          </div>
          <div class="drop-item" @click.stop="onShowAddFolder">
            <img src="../../../assets/image/add-folder.png" alt="">
            <span class="font-large" style="opacity: 0.7">新建文件夹</span>
          </div>
          <div class="drop-item" @click.stop="">
            <img src="../../../assets/image/no-add-file.png" alt="">
            <span class="font-large" style="opacity: 0.7">新建文档</span>
          </div>
        </ul>
      </div>
      <div class="drop-layout" v-if="isShowAddFolder">
        <dialog-add-view @callback="addFolder" :dialogTitle="folderName"/>
      </div>
      <div class="drop-layout" v-if="isShowConfirm">
        <dialog-confirm-view @callback="folderDelete"/>
      </div>
        <!--分享-->
        <div class="drop-layout" v-if="isShowShareUser">
            <dialog-share-user :data="optionForm"/>
        </div>
    </div>
</template>

<script>
    import HeaderView from '../../common/HeaderView';
    import Tabbar from '../../common/Tabbar'
    import DialogAddView from '../../common/DialogAddView';
    import DialogConfirmView from '../../common/DialogConfirmView';
    import DialogSearchView from '../../common/SearchView';
    import FileView from './FileView';
    import FolderView from './FolderView';
    import DialogShowMore from './DialogShowMore';
    import DialogShareUser from '../../common/DialogShareUser';

    import { folderRename, folderDelete, folderAdd, folderChildren } from '../../../api/folder'
    // import { transformTozTreeFormat } from '../../../utils/index'
    import { folderJudge1 } from './judge'

    export default {
        name: 'ProjectFolderView',
        components: {
            HeaderView,
            Tabbar,
            DialogAddView,
            DialogConfirmView,
            DialogSearchView,
            FileView, FolderView, DialogShowMore ,
            DialogShareUser
        },
        data() {
            return {
                projectItemList: [],
                optionForm: null,
                isShowMore: false,
                currentIndex: 1,
                info: null,
                isShowEdit: false,
                dropMenu: this.global.dropMenu,
                isShowAdd: false,
                isShowAddFolder: false,
                projectName: sessionStorage.projectName,
                folderName: '文件夹名称',
                isShowConfirm: false,
                isSearch: false,
                searchName: '',
                searchList: [],
                searchType: 'folder',
                level: 0,
                projectItem: {},
                searchFolderList: [],
                searchFileList: [],
                isShowShareUser: false,
            }
        },
        mounted() {
            this.info = this.$route.params.info ? this.$route.params.info : JSON.parse(sessionStorage.project);
            this.getProjectItemList(this.level, this.searchName)
            document.addEventListener('click', () => {
                if(this.isShowMore)
                    this.isShowMore = false;
                if(this.isSearch)
                    this.isSearch = false;
            })
        },
        watch: {
            currentIndex(val) {
                console.log(val)
                this.$router.push({name: 'index', params: {index: val}})
            }
        },
        methods: {
            onSearch(name) {
              // this.getProjectItemList(1,name)
                folderChildren(1, name, '', '', 1, 200)
                    .then(result => {
                        // console.log(result)
                        const { data } = result;
                        this.searchFileList = data.fileInfos;
                        this.searchFolderList = data.foldInfos;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            //根据id获取列表(默认获取第一个)
            getProjectItemList(level,name) {
                folderChildren(level, name, '', '', 1, 200)
                    .then(result => {
                        // console.log(result)
                        const { data } = result;
                        // this.projectItemList = data.foldInfos;
                        this.projectItem = data;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            goProjectInfo(d) {
                // console.log(d)
                sessionStorage.info = JSON.stringify(d);
                this.$router.push({ name: 'projectInfo', params: { info: d }})
            },
            nextLevelProject(d) {
                this.$router.push({name: 'fileContent', params: {info: d, type: 'file'}})
            },
            goBack() {
                this.$router.push({name: 'index',params: {index: 1}})
            },
            onShowMore(d) {
                this.isShowMore = true;
                this.optionForm = d;
            },
            // 新建文件夹
            onShowAddFolder() {
                this.isShowAddFolder = true;
                this.isShowAdd = false;
            },
            async addFolder(type,name) {
                if (type === '2' && name === '') {
                    return;
                }
                if(type === '1') {
                    this.isShowAddFolder = false;
                    this.isShowAdd= false;
                }else {
                    const parentId = this.optionForm ? this.optionForm.parentId : 0;
                    const is = await folderJudge1(parentId, name);
                    if(is)
                        this.folderAdd(name)
                }

            },
            folderAdd(content) {
                if (this.optionForm !== null && this.optionForm.isUpdate === 0) {
                    this.$toast('无操作权限')
                    return false
                }
                const name = content
                const parentId = this.optionForm ? this.optionForm.id : 0
                let level = this.optionForm ? this.optionForm.level : -1
                level++
                folderAdd(parentId, name, level)
                    .then(result => {
                        const { data } = result
                        if (this.optionForm) {
                            // this.$refs.tree.append(data, this.optionForm)
                        } else {
                            // this.projectItemList.push(data)
                            this.projectItem.foldInfos.push(data)
                            this.$forceUpdate()
                        }
                        this.$toast('添加成功')
                        this.isShowAddFolder = false;
                    })
                    .catch(err => {
                        // this.instanceReset()
                        console.log(err)
                    })
            },
            // 重命名
            onEdit() {
                this.isShowEdit = true;
                this.isShowMore = false;
            },
            async editFolder(type,content) {
                if (type === '2' && content === '') {
                    return;
                }
                if(type === '1') {
                    this.isShowEdit = false;
                    this.isShowMore = false;
                }else {
                    const parentId = this.optionForm ? this.optionForm.parentId : 0;
                    const is = await folderJudge1(parentId, content);
                    if(is)
                        this.folderRename(content)
                }
            },
            folderRename(content) {
                const name = content;
                const parentId = this.optionForm.parentId;
                const folderId = this.optionForm.id;
                folderRename(parentId, name, folderId)
                    .then(() => {
                        this.optionForm.name = content;
                        this.$toast('修改成功');
                        this.isShowEdit = false;
                        this.isShowMore = false;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            onShareFile() {
                this.isShowMore = false;
                this.isShowShareUser = true;
            },
            // 删除
            onDelete() {
              this.isShowConfirm = true;
              this.isShowMore = false;
            },
            folderDelete(type) {
                if(type === '1') {
                  this.isShowConfirm = false;
                  return;
                } else {
                  if (this.optionForm.isDelete === 0) {
                    this.$toast('无操作权限')
                    return false
                  }
                  folderDelete(this.optionForm.id)
                      .then(() => {
                        this.projectItem.foldInfos.splice(
                            this.projectItem.foldInfos.findIndex(v => v.id === this.optionForm.id),
                            1
                        );
                        this.$toast('删除成功');
                        this.isShowEdit = false;
                        this.isShowMore = false;
                        this.isShowConfirm = false;
                      })
                      .catch(err => {
                        console.log(err)
                      })
                }

            },
        }
    }
</script>

<style scoped>
    .title {
        flex: 1;
    }
    .folder-layout {
        margin-bottom: 100px;
    }
    .search-content {
      background: #F5F8FB;
      min-height:100vh;
      margin-top: 135px;
    }
    .content {
        background: #F5F8FB;
        min-height: 82vh;
        margin-top: 135px;
    }
    .project-list {
        padding: 20px 25px;
    }
    .drop-layout {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3);
        z-index: 9999;
    }
     /*操作弹窗*/
    .drop {
        width: 650px;
        height: 360px;
        background: #FFFFFF;
        border-radius: 40px 40px 0 0;
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: center;
        padding: 30px 50px 0;
    }
    .drop .item-title {
        font-size: 28px;
        font-weight: normal;
        color: #181818;
        opacity: 0.7;
        margin-bottom: 53px;
    }
    .drop .item-list {
        display: flex;
        justify-content: space-around;
    }
    .option {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .option img {
        width: 120px;
        height: 120px;
    }
    .option span {
        font-size: 18px;
        font-weight: normal;
        color: #000000;
        opacity: 0.7;
    }
    /*新建*/
    .drop-dialog {
        width: 700px;
        height: 300px;
        background: #F9F7F7;
        border-radius: 40px 40px 0 0;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 15px 110px;
        overflow-y: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .drop-item {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .drop-item img {
      width: 120px;
      height: 120px;
    }
</style>